<div class="px-8 py-4 flex flex-col gap-4" [@listAnimation]="groups.length">
  <div class="flex flex-wrap justify-between items-center">
    <div class="text-xl my-4">{{ 'PAC.MENU.HOME.MyCatalog' | translate: {Default: "My Catalog"} }}</div>
    <div>
      <pac-inline-search [formControl]="searchControl"></pac-inline-search>
    </div>
  </div>
  @for (group of groups$ | async; track group.id) {
    <div>
      <nav class="w-full rounded-md my-2">
        <ol class="list-reset flex flex-wrap overflow-hidden text-ellipsis whitespace-nowrap">
          @for (area of group.areas; track area.id; let last = $last) {
            <li>
              <a href="#"
                class="flex items-center text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
                >
                <mat-icon fontSet="material-icons-outlined">business_center</mat-icon>
                {{area.name}}</a
              >
            </li>
            
            @if (!last) {
              <li>
                <span class="mx-2 text-neutral-500 dark:text-neutral-400">/</span>
              </li>
            }
          }
        </ol>
      </nav>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" [@listAnimation]="group.stories?.length">
        <pac-story-card *ngFor="let story of group.stories; trackBy: trackById"
          [story]="story"
          [highlight]="highlight">
        </pac-story-card>
      </div>
    </div>
  }
</div>
